import { useState, useCallback, useEffect } from "react";
import type { MenuProps } from 'antd';
import { Menu, Dropdown } from 'antd';
import emoji from '../../../../util/emoji'
import './index.less';

function ChatEmoji({ handleSendEmoji }: any) {

    const items: MenuProps['items'] = emoji.map((x: any, i: number) => {
        return {
            key: i,
            label: (
                <p
                    className="emoji-icon"
                    onClick={() => handleSendEmoji(x)}>
                    {x}
                </p>
            ),
        }
    })
    return (
        <>
            <Dropdown
                menu={{ items }}
                trigger={["click"]}
                placement="top"
                overlayClassName="emoji-container"
                arrow
            >
                <img
                    className="input-box-top-icon"
                    src="/assets/icon/xiaoxi_biaoq@2x.png"
                    alt=""
                />
            </Dropdown>

        </>
    );
}

export default ChatEmoji;
